<template>
  <div class="tab">
    <router-link tag="div" class="tab-item" v-for="v in  tabList" :key="v.id" :to='v.router'>
      <span>{{v.name}}</span>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'tabLink',
  props: {
    tabList: {
      type: Array,
      defualt() {
        return []
      }
    }
  },
  data() {
    return {
      curIdex: 0
    }
  },
  methods: {}
}
</script>

<style scoped>
.tab {
  display: flex;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  font-size: 14px;
}
.tab-item {
  flex: auto;
}
.tab-item span {
  padding: 5px;
}
.router-link-active {
  color: var(--color-theme);
}
.router-link-active span {
  border-bottom: 2px solid var(--color-theme);
}
</style>